<template>
  <div>
    <div class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" @click.native="goBack">订单查询</el-breadcrumb-item>
        <el-breadcrumb-item>{{ isDetail?'详情': '编辑备注' }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button v-if="!isDetail" :loading="saveLoading" size="mini" type="primary" @click="submitForm">保存</el-button>
        <!-- <el-button v-if="!isDetail" :loading="saveLoading" size="mini" type="primary" @click="submitForm(1)">提交</el-button> -->
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div>
    <div style="margin-top:20px" class="qup-title-box"><span class="border" /><span>订单信息</span></div>

    <!-- 禁用状态的输入框为带出值 -->
    <el-form
      ref="refForm"
      v-loading="dataLoading"
      style="margin-top:20px"
      :rules="formRules"
      :model="formData"
      size="mini"
      label-width="150px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="配图任务编号:" prop="taskCode">
            <el-input v-model="detailData.taskCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工单流水号:" prop="serialCode">
            <el-input v-model="detailData.serialCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单编号:" prop="orderCode">
            <el-input v-model="detailData.orderCode" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="门店编码:" prop="shopCode">
            <el-input v-model="detailData.shopCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="门店名称:" prop="shopName">
            <el-input v-model="detailData.shopName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="CRM下单时间:" prop="orderTime">
            <el-input v-model="detailData.orderTime" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="CRM确图时间:" prop="confirmTime">
            <el-input v-model="detailData.confirmTime" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商家确认报价时间:" prop="quotationTime">
            <el-input v-model="detailData.quotationTime" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="SAP解锁时间:" prop="unLockTime">
            <el-input v-model="detailData.unLockTime" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单状态:" prop="status">
            {{ formaterData(statusOptions,detailData.status) }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注:" prop="remark">
            <el-input v-model="formData.remark" :disabled="isDetail" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="创建人:" prop="createBy">
            {{ detailData.createBy }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间:" prop="createTime">
            {{ detailData.createTime }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin-top:20px" class="qup-title-box"><span class="border" /><span>产品列表</span></div>
    <table-box
      ref="refTable"
      table-size="mini"
      :table-config="tableConfig"
      :data="tableData"
      :table-height="200"
      show-index
    />
  </div>
</template>
<script>
import { getDictList } from '@/api/dataDict'
import BackPageMixin from '@/mixins/backPage'
import { queryCrmByCode, editOrderSearch } from '@/api/autoDesignTask'
import { formaterData } from '@/utils'

export default {
  name: 'Edit',
  components: { },
  mixins: [BackPageMixin],
  props: {
    detailData: {
      type: Object,
      default: () => {}
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formaterData,
      dataLoading: false,
      saveLoading: false,
      statusOptions: [],
      tableData: [],
      tableConfig: {
        hideFuncBar: true,
        // 表格字段动态配置
        setting: [
          {
            prop: 'kjlProdSpace',
            label: '空间',
            minWidth: '140'
          },
          {
            prop: 'partNumber',
            label: '产品柜号',
            minWidth: '140'
          }, {
            prop: 'kjlProdType',
            label: '产品类型',
            minWidth: '140'
          }, {
            prop: 'kjlProdName',
            label: '产品名称',
            minWidth: '140'
          }, {
            prop: 'kjlProdColor',
            label: '产品颜色',
            minWidth: '140'
          }, {
            prop: 'todo',
            label: '柜体数量(个)',
            minWidth: '140'
          }, {
            prop: 'kjlPurchaseType',
            label: '采购类型(*)',
            minWidth: '130',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_ADS_PURCHASE_TYPE'
            }
          }, {
            prop: 'state',
            label: '产品是否终止',
            minWidth: '140',
            formatData: row => {
              const v = row.state
              if (v !== 'Normal') {
                return '是'
              } else if (v === 'Normal') {
                return '否'
              }
              return row.state
            }
          }

        ]
      },
      formRules: {},
      formData: {
        remark: '',
        id: ''
      }
    }
  },
  watch: {
  },
  async created() {
    getDictList({ dictTypeCode: 'CRM_PURCHASE_ORDER_STATUS' }, 'top2-crm', 'marketing').then(res => {
      if (res.success) {
        this.statusOptions = res.data
      }
    })
    if (this.detailData && this.detailData.taskCode) {
      const { id, remark } = this.detailData
      this.formData = { id, remark }
    }
    this.searchSerialCode(this.detailData.serialCode)
  },
  methods: {
    saveForm() {

    },
    // 查询crm工单流水号信息
    searchSerialCode(data) {
      if (!data) return
      queryCrmByCode(data).then(res => {
        if (res.success && res.data.records.length > 0) {
          this.tableData = res.data.records[0].orderItemList || []
        } else {
          this.tableData = []
          this.$message.warning('未查询到产品列表')
        }
      })
    },
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          editOrderSearch(this.formData).then(res => {
            if (res.success === 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.goBack()
              const isNew = !this.formData.id // 是否新增数据 true (新增则刷新列表到第一页)/ false (非新增则刷新当前页)
              this.$emit('success', isNew)
              this.saveLoading = false
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
